<template>
  <div class="evn">
    <Row :gutter="20" style="margin-bottom:10px">
      <Col :span="15">
        <div class="dial-plate">
          <div>剩余总电量</div>
          <div>{{data}}</div>
        </div>
      </Col>
      <Col :span="9">
        <div style="width:100%;display: flex;justify-content: flex-start;align-items: center;flex-direction: column">
          <div style="margin-top:28px;" class="text">储能系统剩余总电量</div>
          <div style="margin-top:10px;" class="text">(千瓦时)</div>
          <div style="margin-top:16px;" class="text-1">{{data}}</div>
        </div>
      </Col>

    </Row>
  </div>
</template>
<script>
export default {
  name: "echart",
  props: {
    data:Number | String
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="scss">
.text {
  color: #999;
}
.text-1 {
  color: #369afe;
  font-size:24px;
}
  .dial-plate {
    width:289px;
    height:195px;
    background: url("../../../../assets/img/storePower/18.png") no-repeat center /contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    >div:first-child {
      font-size: 18px;
      color:#999;
      margin-top:30px;
    }
    >div:last-child {
      font-size: 24px;
      color:#91dc06;
      margin-top:20px;
    }

  }
</style>
